<template>
	<view class="home-container">
    <Navbar title="首页" :showStatusbar="false"/>
    <view style="height: 20rpx"></view>
		<!-- 顶部 Banner 轮播 -->
    <u-swiper bg-color="#fff" :list="banners" @click="clickBanner" height="350" :effect3d="true"></u-swiper>

    <!-- 推荐产品列表 -->
		<view class="recommend-section">
      <view class="recommend-title">
        <image class="recommend-title-l" src="/static/icon/tit-icon-l.png"></image>
        <text>为你推荐</text>
        <image class="recommend-title-r" src="/static/icon/tit-icon-r.png"></image>
      </view>
			<view class="product-list">
				<view @click="toDetail(item)" class="product-card" v-for="item in products" :key="item.id">
					<image :src="item.logo_url" class="product-logo" mode="aspectFit" />
					<view class="product-info">
						<view class="product-title">{{ item.name }}</view>
						<view class="product-meta">
							<text class="meta-label">
                额度
              </text>
							<text class="meta-value" style="font-size: 32rpx;color:red;font-weight: bold">{{ item.max_amount }}</text>
						</view>
            <view class="product-meta">
              <text class="meta-label">
                年化利率
              </text>
              <text class="meta-value rate">{{ item.min_annual_rate }}% ~ {{ item.max_annual_rate }}%</text>
            </view>
						<view class="product-meta">
							<text class="meta-label">
                期限
              </text>
							<text class="meta-value">{{ item.min_term }}~{{ item.max_term }}个月</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Navbar from "../../components/navbar.vue";

  export default {
    components: {Navbar},
		data() {
			return {
				banners: [

				],
				products: [

				]
			}
		},
    onShow() {
      this.$api.getBannerList({
      }).then(res =>{
        this.banners = res.map(item => {
          return {
            ...item,
            image: item.image_url
          }
        })
      })
      this.$api.getProductList({
        is_recommend: 1,
        pageSize: 999
      }).then(res => {
        this.products = res.rows
      })
    },
    methods: {
      toDetail(item) {
        uni.navigateTo({
          url: '/pages/product/detail?id=' + item.id
        })
      },
      clickBanner(e) {
        console.log(e)
        let path = this.banners[0].click
        // 浏览器打开新地址
        window.open(path, '_blank')
      }
    }
	}
</script>

<style lang="scss">
	.home-container {
		min-height: 100vh;
    padding: 20rpx;
  }
.banner-section {
  background-color: #ffffff;
  border-radius: 32rpx;
  overflow: hidden;
}
	.banner-swiper {
		height: 300rpx;
		border-radius: 24rpx;
		overflow: hidden;
		margin: 24rpx 24rpx 0 24rpx;
	}

	.banner-image {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.recommend-section {
	  margin: 32rpx 0;
    .recommend-title {
      display: flex;
      align-items: center;
      margin: 32rpx 6rpx;
      text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
      }

      image {
        width: 40rpx;
        height: 22rpx;
      }

      .recommend-title-l {
        margin-right: 30rpx;
      }

      .recommend-title-r {
        margin-left: 30rpx;
      }
    }
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 24rpx;
	}

	.product-list {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.product-card {
    width: 100%;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    padding: 20rpx;
    display: flex;
    margin-bottom: 24rpx;
  }

	.product-logo {
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
		border-radius: 0;
		background: none;
		border: none;
    background-color: #ffffff;
	}

	.product-info {
		flex: 1;
	}

	.product-title {
    font-size: 32rpx;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 44rpx;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    vertical-align: top;
  }

	.product-meta {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #888;
		margin-bottom: 0;
    margin-top: 12rpx;
	}

	.meta-label {
		margin-right: 4rpx;
		color: #bbb;
	}

	.meta-value {
		margin-right: 16rpx;
		color: #222;
		font-weight: 400;
	}

	.meta-value.rate {
		color: #ff6600;
	}
</style>